<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="layui/css/layui.css" />
    </head>
    <body>
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="tools">
            <form class="layui-form" lay-filter="searchForm">
          <div class="layui-input-inline">
              <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                  <i class="layui-icon">&#xe654;</i>
            </button>
          </div>
              <div class="layui-input-inline type">
              <select name="type" >
                  <option value="name">姓名</option>
                  <option value="gender">性别</option>
                  <option value="age">年龄</option>
                </select>
              </div>
              <div class="layui-input-inline value">
                  <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
              </div>
              <div class="layui-input-inline">
                  <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                      <i class="layui-icon">&#xe615;</i>
                    </button>
              </div>
        </div>
        <script type="text/html" id="studentBar">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>
        <script src="layui/layui.js"></script>
        <script>
            layui.use(function () {
                let { table, $,form } = layui;
                table.render({
                    elem: "#studentTable",
                    height: 312,
                    url: "/students/find", //数据接口
                    toolbar: "#tools",
                    page: false, //开启分页
                    cols: [
                        [
                            //表头
                            {
                                field: "name",
                                title: "姓名",
                            },
                            {
                                field: "gender",
                                title: "性别",
                            },
                            { field: "age", title: "年龄" },
                            {fixed: 'right', width:150, align:'center', toolbar: '#studentBar'}
                        ],
                    ],
                    
                });
                table.on('toolbar(studentTable)', function(obj){
                    console.log(obj)
                    if(obj.event == "add"){
                        layer.open({
                            type: 1, 
                            title:"增加学生",
                            btn:['确定','取消'],
                            success(){
                                form.render();
                            },
                            yes(index){
                                $.ajax({
                                    type:"post",
                                    url:"/students/insert",
                                    data:form.val("addForm"),
                                    success(){
                                        table.reload("studentTable",{
                                            where:{}
                                        });
                                        layer.close(index);
                                    }
                                });
                            },
                            content:`
                            <form class="layui-form addForm" lay-filter="addForm" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入姓名"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">年龄</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="age"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入年龄"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                    <input type="radio" name="gender" value="男" title="男">
                                    <input type="radio" name="gender" value="女" title="女">
                                    </div>
                                </div>
                            </form>
                            `
                        })
                    }
                })
                table.on('tool(studentTable)',function(obj){
                    if(obj.event == "edit"){
                        layer.open({
                            type: 1, 
                            title:"修改学生",
                            btn:['确定','取消'],
                            success:function(){
                                $.ajax({
                                    type:"get",
                                    url:"/students/findById",
                                    data:{
                                        id:obj.data._id
                                    },
                                    success(res){
                                        form.val("updateForm",res);
                                    }
                                });
                            },
                            yes:function(index){
                                $.ajax({
                                    type:"post",
                                    url:"/students/update",
                                    data:{id:obj.data._id,...form.val("updateForm")},
                                    success(){
                                        table.reload("studentTable");
                                        layer.close(index);
                                    }
                                });
                               
                            },
                            content: `
                            <form class="layui-form updateForm" lay-filter="updateForm" action="">
                                
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="name"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入姓名"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">年龄</label>
                                    <div class="layui-input-block">
                                        <input
                                            type="text"
                                            name="age"
                                            required
                                            lay-verify="required"
                                            placeholder="请输入年龄"
                                            autocomplete="off"
                                            class="layui-input"
                                        />
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择班级</label>
                                    <div class="layui-input-block">
                                        <select name="cls" >
                                           
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                    <input type="radio" name="gender" value="男" title="男">
                                    <input type="radio" name="gender" value="女" title="女">
                                    </div>
                                </div>
                            </form>
                            `
                        });
                    }
                });
            });
        </script>
    </body>
</html>
